<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>list</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <style>
      header{
        height:50px;
        line-height:50px;
        background-color:rgb(34,54,65);
        color:#fff;
        padding:0 10px;
        font-size:20px;
      }
      header a {
        float:right;
        color:#fff;
      }

      #container{
        display:fixed;
        top:70px;
        bottom:30px;
        padding:5px;
      }

      sidebar{
        width:250px;
        position:fixed;
        left:5px;
        top:55px;
        bottom:35px;
        background:#aaa;
        border:1px solid #ccc;
      }

      #main{
        position:fixed;
        left:260px;
        right:5px;
        top:55px;
        bottom:35px;
        background:#aaa;
        border:1px solid #ccc;
      }
      
      footer{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        border-top:1px solid #ccc;
        padding:0 10px;
        height:30px;
        line-height:30px;
      }
    </style>
  </head>
  <body>
  <header>数技1903的博客管理系统 <a href="">注销</a></header>
  <div id="container">
    <sidebar>
      这边准备放菜单
    </sidebar>
    <div id="main">
      这边准备放表格
    </div>
  </div>
  <footer>
    版权所有 © 数技1903 2021-2022
  </footer>

  <script src="/static/js/jquery-2.1.4.min.js" />
  <script src="/static/bootstrap/js/bootstrap.min.js" />
  </body>
</html>